<template>
	<div class="pay-month abs full">
		<div class="rel full overflow-x-hidden">
			<div class="pay-month-header">
				<div class="usc-photo rel">
					<img class="round" :src="user.avatarUrl" alt="">
					<span class="abs badge" v-if="0"></span>
				</div>
				<div class="usc-info">
					<h2 v-if="user.nickName" v-text="user.nickName"></h2>
					<p><span v-if="user.member_info_month && user.member_info_month.valid">会员续费</span><span v-else>成为包月会员</span>，享受更多优质服务</p>
				</div>
			</div>
			<div class="pay-month-content">
				<div class="em-rect"></div>
				<p class="pay-item-h">选择包月数</p>
				<ul>
					<li v-for="(item, index) in costList" class="pay-item rel" :class="ind==index?'active':''" @click="addActiveClass(index)">
						<span v-text="item.typeName"></span>
						<span v-text="item.membershipCost"></span>
						<span>元</span>
						<span class="fresh" v-if="item.membershipCostCode=='FIRST_PRICE'">尝鲜价</span>
					</li>
				</ul>
				<h3>每天可查阅3个报告，20个综合评价。</h3>
				<p>会员有效期至：<span v-text="invalidTime"></span><br/>包月费用小计：<span v-text="selectedCost.average"></span>元</p>
				<h2>支付金额：<span v-text="selectedCost.membershipCost"></span>元</h2>
				<button class="pay-month-button" @click="weixinPay()">现在支付</button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'pay-month',
	data() {
		return {
			user:{},
			customer:{},
			costList:[],
			selectedCost:{},
			invalidTime: null,
			ind: 0
		}
	},
	mounted() {
		// 为方便调试把this暴露在Vue原型链下
		this.$pages.payMonth = this;
		this.getCustomerDetail();
		this.getCostList();
	},
	activated() {
		document.title = '包月支付';
	},
	deactivated() {

	},
	methods: {
		// 获取用户信息
		getCustomerDetail(){
			let that=this;
			if(this.$store.user && this.$store.user.nickName){
				this.user=this.$store.user;
				return;
			}
			let customerId=this.$util.getCustomerId();
			if(!customerId){
				return;
			}
			let json={customerId}
			this.$util.ajax('/customer/detail','post',json).then(function(res){
				if(res.code=='100000'){
					that.user=res.data;
					that.$store.user=res.data;
				}
			})
		},
		// 点选的行高亮
		addActiveClass (index) {
			this.ind = index
			this.selectedCost=this.costList[index];
			this.calcInvalidTime();
		},
		// 获取会员价格信息列表
		getCostList(){
			let that=this;
			let customerId=this.$util.getCustomerId();
			if(!customerId){
				return;
			}
			let json={
				customerId,
				membershipCostType:'month'
			}
			this.$util.ajax('/membership/costs/list','post',json).then(function(res){
				if(res.code=='100000'){
					let list=res.data;
					for(let i in list){
						let monthNum=parseInt(list[i].typeName);
						list[i].average=(list[i].membershipCost / monthNum).toFixed(2);
					}
					that.costList=list;
					list.length>0 && that.addActiveClass(0);
				}
			})
		},
		// 计算当前高亮的会员的失效时间
		calcInvalidTime(){
			let addMonth=parseInt(this.selectedCost.typeName);
			let time=new Date();
			let year=time.getFullYear();
			let month=time.getMonth()+1;
			let day=time.getDate();
			month+=addMonth;
			if(month>12){
				let countYear=~~(month/12);
				year=year+countYear;
				month=month-(12*countYear);
			}
			let futureString=year+'/'+month+'/'+day;
			let future=new Date(futureString);
			let futureYear=future.getFullYear();
			let futureMonth=future.getMonth()+1;
			let futureDay=future.getDate();
			futureMonth<10?futureMonth='0'+futureMonth:null;
			futureDay<10?futureDay='0'+futureDay:null;
			this.invalidTime = futureYear+'-'+futureMonth+'-'+futureDay;
		},
		// 微信支付
		weixinPay(){
			let that=this;
			let customerId=this.$util.getCustomerId();
			if(!customerId){
				return;
			}
			let json={
				customerId,
				membershipId: that.selectedCost.membershipId,
				membershipCostCode: that.selectedCost.membershipCostCode
			};
			this.$util.ajax('/wechat/order/create','post',json,'filter').then(function(res){
				if(res.code=='100000'){
					let json2=res.data;
					window.WeixinJSBridge && WeixinJSBridge.invoke(
						'getBrandWCPayRequest',
						json2,
						function(res){
							if(res.err_msg == "get_brand_wcpay_request:ok") {
								that.$router.replace('/pay-history');
							} else if(res.err_msg == "get_brand_wcpay_request:fail" || res.err_msg == "get_brand_wcpay_request:cancel"){
								window.ui && window.ui.showToast('支付未完成','');
							}
						}
					);
				} else if(res.code=='200005'){
					that.hideToast();
					that.showAlert('请先绑定手机号再购买会员',
						function(){
							that.$router.push('/bind-mobile')
						},
						function(){},
						'去绑定'
					);
				}
			})
		}
	}
}
</script>

<style scoped>
.pay-month {
	background-color: #fff;
}
.pay-month-header{
	width: 100%;
	height: 2.11rem;
	margin-top: -0.06rem;
	overflow: hidden;
	background: url("./image/bg.png");
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
}
.pay-month-header .usc-photo{
	float: left;
	width: 1.37rem;
	height: 1.37rem;
	border-radius: 50%;
	margin: 0.28rem 0.32rem 0.22rem 0.35rem;
}
.usc-photo img{
	width: 1.37rem;
	height: 1.37rem;
}
.pay-month-header .usc-photo .badge{
	width: 0.41rem;
	height: 0.41rem;
	border-radius: 50%;
	background: url("../user-center/image/badge.png");
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	bottom: 0.08rem;
	right:0.17rem;
}
.pay-month-header .usc-info{
	width: 5.46rem;
	height: 2.11rem;
	display: table-cell;
	float: left;
	margin-top: 0.59rem;
	text-align: left;
}
.pay-month-header .usc-info h2{
	margin: 0 0 0.08rem 0;
	color: #fff;
	font-size: 0.34rem;
	font-weight: normal;
}
.pay-month-header .usc-info p{
	margin: 0;
	color: #fff;
	font-size: 0.24rem;
}
.pay-month-content .em-rect{
	width: 100%;
	height: 0.47rem;
	background-color: #f4f5f8;
	margin-top: -0.06rem;
	overflow: hidden;
}
.pay-month-content .pay-item-h{
	font-size: 0.34rem;
	color: #333333;
	padding-left: 0.3rem;
	margin: 0;
	height: 1.01rem;
	line-height: 1.01rem;
	width: 100%;
}
.pay-month-content ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
.pay-month-content li{
	font-size: 0;
	color: #333333;
	padding-left: 0.3rem;
}
.pay-month-content li span{
	font-size: 0.3rem;
}
.pay-month-content .active{
	background-color:rgba(85, 154, 240, .15);
}
.pay-month-content .pay-item{
	height: 1.09rem;
	line-height: 1.09rem;
}
.pay-month-content .pay-item span{
	color: #3084fc;
}
.pay-month-content .pay-item .fresh{
	background-color: #f3a93d;
	width: 0.92rem;
	height: 0.36rem;
	line-height: 0.36rem;
	font-size: 0.24rem;
	border-radius: 0.1rem;
	color: #fff;
	margin-left: 0.3rem;
	padding: 0 0.12rem;
}
.pay-month-content .pay-item:after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 0.38rem;
	height: 0.38rem;
	border-radius: 50%;
	border: 0.02rem solid #3084fd;
	top: 0.35rem;
	right: 0.3rem;
}
.pay-month-content .active:before{
	content: '';
	position: absolute;
	display: inline-block;
	width: 0.26rem;
	height: 0.26rem;
	background-color: #3084fd;
	border-radius: 50%;
	top: 0.43rem;
	right: 0.38rem;
}
.pay-month-content h3{
	margin: 0;
	padding-left: 0.3rem;
	font-size: 0.24rem;
	font-weight: normal;
	color: #666;
	line-height: 0.7rem;
	background-color: rgba(240, 238, 244, .6);
}
.pay-month-content p{
	font-size: 0.24rem;
	padding-left: 0.3rem;
	margin: 0.3rem 0;
	color: #444;
	line-height: 0.42rem;
}
.pay-month-content h2{
	font-size: 0.34rem;
	color: #076cf7;
	font-weight: normal;
	line-height: 0.7rem;
	text-align: center;
	background-color: rgba(240, 238, 244, .6);
}
.pay-month-content button{
	display: block;
	width: 6.23rem;
	height: 0.86rem;
	font-size: 0.3rem;
	margin: 0.56rem auto;
	color: #fff;
	background-color: #4a96fd;
	border: none;
	border-radius: 0.1rem;
}
</style>
